<template>
  <div class="mod-home">
    <div
      v-if="shopStatusInfo.shopStatus !== null && shopStatusInfo.shopStatus !== 1"
      class="shop-inf-imperfect-tips"
    >
      <div v-if="shopStatusInfo.shopStatus === 2">
        <div>
          <el-icon><WarningFilled /></el-icon>
          {{ $t('shopProcess.yourStoreIsOfflineBecauseOf') }}
          <span>{{ shopStatusInfo.offlineReason }}</span>
          ，{{ $t('shopProcess.onlineShopTips') }}
        </div>
      </div>
      <div v-if="shopStatusInfo.shopStatus === 0">
        <div>
          <el-icon><CircleCloseFilled /></el-icon>
          {{ $t('shopProcess.shopStopReason') }}
          <span>{{ shopStatusInfo.closedReason }}</span>
          ，{{ $t('shopProcess.shopStopTips') }}
        </div>
      </div>
      <div v-if="shopStatusInfo.shopStatus === 5 || shopStatusInfo.shopStatus === 3">
        <div>
          <el-icon><WarningFilled /></el-icon>
          {{ $t('shopProcess.applyingOnline') }}，
          <span>{{ $t('shopProcess.shopIsUnderReview') }}</span>
        </div>
      </div>
    </div>

    <!-- 数据 -->
    <!-- 基本信息 -->
    <div class="order-all-num white-basic">
      <div class="title-basic">
        {{ $t('shopProcess.basicInfo') }}
      </div>
      <div class="row-bg">
        <div class="num-item-box">
          <div class="wait-payment-num order-num-item">
            <div class="item-box">
              <div class="words">
                {{ $t('home.basicInfoA') }}
              </div>
              <div class="number">
                <span class="text">{{ basicInfo.prodNum }}</span>
              </div>
            </div>
            <div class="item-img">
              <img
                src="@/assets/img/home/wait-payment-num.png"
                alt
              >
            </div>
          </div>
        </div>
        <div class="num-item-box">
          <div class="wait-delivery-num order-num-item">
            <div class="item-box">
              <div class="words">
                {{ $t('home.basicInfoB') }}
              </div>
              <div class="number">
                <span class="text">{{ basicInfo.userNum }}</span>
              </div>
            </div>
            <div class="item-img">
              <img
                src="@/assets/img/home/wait-delivery-num.png"
                alt
              >
            </div>
          </div>
        </div>
        <div class="num-item-box">
          <div class="wait-receiving-goods-num order-num-item">
            <div class="item-box">
              <div class="words">
                {{ $t('home.basicInfoC') }}
              </div>
              <div class="number">
                <span class="text">{{ basicInfo.orderNum }}</span>
              </div>
            </div>
            <div class="item-img">
              <img
                src="@/assets/img/home/wait-receiving-goods-num.png"
                alt
              >
            </div>
          </div>
        </div>
        <div class="num-item-box">
          <div class="wait-evaluate-num order-num-item">
            <div class="item-box">
              <div class="words">
                {{ $t('home.basicInfoD') }}
              </div>
              <div class="number">
                <span class="text">{{ basicInfo.shopNum }}</span>
              </div>
            </div>
            <div class="item-img">
              <img
                src="@/assets/img/home/wait-evaluate-num.png"
                alt
              >
            </div>
          </div>
        </div>
        <div class="num-item-box">
          <div class="wait-after-sales-num order-num-item">
            <div class="item-box">
              <div class="words">
                {{ $t('home.basicInfoE') }}
              </div>
              <div class="number">
                <span class="text">{{ basicInfo.refundNum }}</span>
              </div>
            </div>
            <div class="item-img">
              <img
                src="@/assets/img/home/wait-after-sales-num.png"
                alt
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 基本信息end -->

    <!-- 今日待办 -->
    <div class="white-basic">
      <div class="title-basic">
        {{ $t('home.pendingToday') }}
      </div>
      <div
        class="abeyance-box"
        :class="paySettlementType===1?'allinpay-abeyance':''"
      >
        <div class="audit-violations order-num-item">
          <div class="item-img">
            <img
              src="@/assets/img/home/audit-violations.png"
              alt
            >
          </div>
          <div class="item-box">
            <div class="words">
              {{ $t('home.pendingTodayA') }}
            </div>
            <div class="number">
              {{ pendingToday.prodAuditNum }}
            </div>
          </div>
        </div>

        <div class="stores-to-audited order-num-item">
          <div class="item-img">
            <img
              src="@/assets/img/home/stores-to-audited.png"
              alt
            >
          </div>
          <div class="item-box">
            <div class="words">
              {{ $t('home.pendingTodayB') }}
            </div>
            <div class="number">
              {{ pendingToday.shopAuditNum }}
            </div>
          </div>
        </div>

        <div
          v-if="paySettlementType!==1"
          class="distribution-withdrawals order-num-item"
        >
          <div class="item-img">
            <img
              src="@/assets/img/home/distribution-withdrawals.png"
              alt
            >
          </div>
          <div class="item-box">
            <div class="words">
              {{ $t('home.pendingTodayC') }}
            </div>
            <div class="number">
              {{ pendingToday.distributionAuditNum }}
            </div>
          </div>
        </div>

        <div
          v-if="paySettlementType!==1"
          class="withdraw-cash order-num-item"
        >
          <div class="item-img">
            <img
              src="@/assets/img/home/withdraw-cash.png"
              alt
            >
          </div>
          <div class="item-box">
            <div class="words">
              {{ $t('home.pendingTodayD') }}
            </div>
            <div class="number">
              {{ pendingToday.withdrawalAuditNum }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 今日待办end -->

    <!-- 实时概况 -->
    <div class="realtime-situation-box white-basic">
      <div class="title-basic">
        {{ $t('home.nowDate') }}
        <div class="select-date">
          {{ $t('home.updateTime') }}： {{ dateRangeParam }}
        </div>
      </div>
      <div class="real-time-content">
        <div class="item">
          <div class="word">
            {{ $t('home.ordersToday') }}
            <el-tooltip
              effect="dark"
              placement="right"
            >
              <template #content>
                <div
                  style="max-width:500px"
                >
                  {{ $t("home.ordersTodayTip") }}
                </div>
              </template>
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="number">
            {{ nowDateForm.currentOrderNum }}
          </div>
        </div>
        <div class="item">
          <div class="word">
            {{ $t('home.newMembersToday') }}
            <el-tooltip
              effect="dark"
              placement="right"
            >
              <template #content>
                <div
                  style="max-width:500px"
                >
                  {{ $t("home.newMembersTodayTip") }}
                </div>
              </template>
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="number">
            {{ nowDateForm.currentUserNum }}
          </div>
        </div>
        <div class="item">
          <div class="word">
            {{ $t('home.newStores') }}
            <el-tooltip
              effect="dark"
              placement="right"
            >
              <template #content>
                <div
                  style="max-width:500px"
                >
                  {{ $t("home.newStoresTip") }}
                </div>
              </template>
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="number">
            {{ nowDateForm.currentShopNum }}
          </div>
        </div>
        <div class="item">
          <div class="word">
            {{ $t('home.todayVisitors') }}
            <el-tooltip
              effect="dark"
              placement="right"
            >
              <template #content>
                <div
                  style="max-width:500px"
                >
                  {{ $t("home.todayVisitorsTip") }}
                </div>
              </template>
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="number">
            {{ nowDateForm.todayVisitors }}
          </div>
        </div>
        <div class="item">
          <div class="word">
            {{ $t('home.visitorsInTheLastSevenDays') }}
            <el-tooltip
              effect="dark"
              placement="right"
            >
              <template #content>
                <div
                  style="max-width:500px"
                >
                  {{ $t("home.visitorsInTheLastSevenDaysTip") }}
                </div>
              </template>
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="number">
            {{ nowDateForm.firstSevenDayVisitors }}
          </div>
        </div>
        <div class="item">
          <div class="word">
            {{ $t('home.realtimeSituationA') }}
            <el-tooltip
              effect="dark"
              placement="right"
            >
              <template #content>
                <div
                  style="max-width:500px"
                >
                  {{ $t("home.realtimeSituationATip") }}
                </div>
              </template>
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="number">
            {{ nowDateForm.currentPayAmount }}
          </div>
        </div>
        <div class="item">
          <div class="word">
            {{ $t('home.realtimeSituationB') }}
            <el-tooltip
              effect="dark"
              placement="right"
            >
              <template #content>
                <div
                  style="max-width:500px"
                >
                  {{ $t("home.realtimeSituationBTip") }}
                </div>
              </template>
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="number">
            {{ nowDateForm.currentProdNum }}
          </div>
        </div>
        <div class="item">
          <div class="word">
            {{ $t('home.realtimeSituationC') }}
            <el-tooltip
              effect="dark"
              placement="right"
            >
              <template #content>
                <div
                  style="max-width:500px"
                >
                  {{ $t("home.realtimeSituationCTip") }}
                </div>
              </template>
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="number">
            {{ nowDateForm.currentProdCommNum }}
          </div>
        </div>
        <div class="item">
          <div class="word">
            {{ $t('home.realtimeSituationD') }}
            <el-tooltip
              effect="dark"
              placement="right"
            >
              <template #content>
                <div
                  style="max-width:500px"
                >
                  {{ $t("home.realtimeSituationDTip") }}
                </div>
              </template>
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="number">
            {{ nowDateForm.yesterdayVisitors }}
          </div>
        </div>
        <div class="item">
          <div class="word">
            {{ $t('home.realtimeSituationE') }}
            <el-tooltip
              effect="dark"
              placement="right"
            >
              <template #content>
                <div
                  style="max-width:500px"
                >
                  {{ $t("home.realtimeSituationETip") }}
                </div>
              </template>
              <el-icon><QuestionFilled /></el-icon>
            </el-tooltip>
          </div>
          <div class="number">
            {{ nowDateForm.firstThirtyDayVisitors }}
          </div>
        </div>
      </div>
    </div>

    <!-- 底部流量走势图 -->
    <div class="refund-plate">
      <div class="ranking-box">
        <!-- 流量走势 -->
        <div class="refund-rate-box">
          <div class="refund-chart-msg">
            <div class="msg-tit-txt">
              <div class="msg-tit">
                {{ $t('home.Traffictrend') }}
              </div>

              <div>
                <el-date-picker
                  v-model="trendDataRange1"
                  type="daterange"
                  :range-separator="$t('date.tip')"
                  :default-time="[new Date(2000, 1, 1, 0, 0, 0),
                                  new Date(2000, 2, 1, 23, 59, 59)]"
                  value-format="YYYY-MM-DD"
                  :start-placeholder="trendDataRange1[0]"
                  :end-placeholder="trendDataRange1[1]"
                  :clearable="false"
                  @change="trendRangeChange(1)"
                />
              </div>

              <div class="refund-tip">
                <div><i class="traffictrendB" />{{ $t('home.TraffictrendB') }}</div>
                <div><i class="traffictrendA" />{{ $t('home.TraffictrendA') }}</div>
              </div>
            </div>
          </div>
          <div style="height: 100%">
            <!-- 图表 -->
            <div
              id="refPer-chart"
              class="refund-chart"
              style="width: 100%; height: 300px"
            />
            <div
              v-if="!sellerMotorList.userNum.length"
              class="empty"
            >
              {{ $t('order.noData') }}
            </div>
            <!--/ 图表 -->
          </div>
        </div>
        <!-- 流量走势end -->

        <!-- 热卖商城TOP10 -->
        <div class="ranking-left">
          <div class="ranking-title">
            {{
              $t('home.TraffictrendE')
            }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
            <span>
              <el-date-picker
                v-model="shopDateRange"
                type="daterange"
                :range-separator="$t('date.tip')"
                :default-time="[new Date(2000, 1, 1, 0, 0, 0),
                                new Date(2000, 2, 1, 23, 59, 59)]"
                value-format="YYYY-MM-DD HH:mm:ss"
                :start-placeholder="shopDateRange[0]"
                :end-placeholder="shopDateRange[1]"
                :clearable="false"
                @change="shopListTimeChange"
              />
            </span>
          </div>

          <table
            class="table"
            style="border-spacing: 0"
          >
            <tr class="table-tit gray">
              <td class="table-tit-item ranks padLeft">
                {{ $t('home.rank') }}
              </td>
              <td class="table-tit-item prods">
                {{ $t('prodList.shopName') }}
              </td>
              <td class="table-tit-item refs money-padleft">
                {{ $t('home.turnover') }}
              </td>
              <td class="table-tit-item prop">
                {{ $t('home.sales') }}
              </td>
            </tr>
            <tr
              v-for="(item, index) in hotShopList"
              :key="index"
              class="table-tit"
            >
              <td class="padLeft">
                {{ index + 1 }}
              </td>
              <td>{{ item.shopName }}</td>
              <td class="money-padleft">
                ￥{{ item.amount }}
              </td>
              <td>{{ item.sales }}</td>
            </tr>
          </table>
          <div
            v-if="!hotShopList.length"
            class="empty"
          >
            {{ $t('order.noData') }}
          </div>
        </div>
        <!--/ 热卖商城TOP10 end -->
      </div>

      <!-- 交易趋势 -->
      <div class="refund-chart-box">
        <div class="successed-refund">
          <div class="refund-chart-msg">
            <div class="msg-tit-txt">
              <div class="msg-tit">
                {{ $t('home.TraffictrendC') }}
              </div>
              <div>
                <el-date-picker
                  v-model="trendDataRange2"
                  type="daterange"
                  :range-separator="$t('date.tip')"
                  :default-time="[new Date(2000, 1, 1, 0, 0, 0),
                                  new Date(2000, 2, 1, 23, 59, 59)]"
                  value-format="YYYY-MM-DD"
                  :start-placeholder="trendDataRange2[0]"
                  :end-placeholder="trendDataRange2[1]"
                  :clearable="false"
                  @change="trendRangeChange(2)"
                />
              </div>
              <div class="refund-tip">
                <div><i class="traffictrendA" />{{ $t('home.TraffictrendD') }}</div>
              </div>
            </div>
          </div>
          <div style="height: 100%">
            <!-- 图表 -->
            <div
              id="ref-chart"
              class="refund-chart"
              style="width: 100%; height: 300px"
            />
            <!--/ 图表 -->
            <div
              v-if="!tradeTendencyList.length"
              class="empty"
            >
              {{ $t('order.noData') }}
            </div>
          </div>
        </div>

        <!-- 热卖商品TOP10-->
        <div
          class="ranking-right"
          style="height: auto; min-height: 580px;"
        >
          <div class="ranking-title">
            {{
              $t('home.TraffictrendF')
            }}&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
            <span>
              <el-date-picker
                v-model="prodDateRange"
                type="daterange"
                :range-separator="$t('date.tip')"
                value-format="YYYY-MM-DD HH:mm:ss"
                :default-time="[new Date(2000, 1, 1, 0, 0, 0),
                                new Date(2000, 2, 1, 23, 59, 59)]"
                :start-placeholder="prodDateRange[0]"
                :end-placeholder="prodDateRange[1]"
                :clearable="false"
                @change="prodListTimeChange"
              />
            </span>
          </div>

          <table class="table table-con">
            <tr class="table-tit gray">
              <td class="table-tit-item rank padLeft">
                {{ $t('home.rank') }}
              </td>
              <td class="table-tit-item prod">
                {{ $t('product.prodName') }}
              </td>
              <td class="table-tit-item ref money-padleft">
                {{ $t('home.paidAmount') }}
              </td>
              <td class="table-tit-item ref">
                {{ $t('home.sales') }}
              </td>
            </tr>
            <tr
              v-for="(item, index) in hotProdList"
              :key="index"
            >
              <td class="padLeft">
                {{ index + 1 }}
              </td>
              <td
                class="line-clamp-one"
                style="word-break: break-word"
              >
                {{ item.prodName }}
              </td>
              <td class="money-padleft">
                ￥{{ item.amount }}
              </td>
              <td>{{ item.sales }}</td>
            </tr>
          </table>
          <div
            v-if="!hotProdList.length"
            class="empty"
          >
            {{ $t('order.noData') }}
          </div>
        </div>
        <!--/ 热卖商品TOP10end-->
      </div>
    </div>
    <!-- /底部流量走势图 -->
  </div>
</template>

<script setup>
import moment from 'moment'
import { formatDate } from '@/utils/date-util.js'
import * as $echarts from 'echarts'

// 商城状态信息
const shopStatusInfo = reactive({
  accountStatus: 0, // 账号状态， 1:启用 0:禁用 -1:删除
  shopStatus: null, // 商城状态 -1:已删除 0: 停业中 1:营业中 2:平台下线 3:待审核 4:商城申请中 5:申请失败 6:上线申请中
  offlineStatus: 0, // 下线状态 1 平台进行下线 2 重新申请，等待审核 3.审核通过 4 审核未通过
  offlineReason: '', // 下线原因
  contractStartTime: '', // 签约起始时间
  contractEndTime: '', // 签约终止时间
  closedReason: '' // 停业原因
})

const allinpayStore = useAllinpayStore()
const paySettlementType = computed(() => {
  return allinpayStore.paySettlementType
})

onMounted(() => {
  getPlatformStatistics() // 获取首页的基本信息 今日待办 实时概况

  timeFormat()
  shopListTimeChange()
  prodListTimeChange()
})

let refChart = null // 成功退款金额
let refPerChart = null // 退款率

const dateRangeParam = ref(moment().startOf('day').format('YYYY-MM-DD'))
const nowDateForm = ref({}) // 实时概况

const basicInfo = ref({}) // 基本信息
const pendingToday = ref({}) // 今日待办
const tradeTendencyList = ref([]) // 交易趋势
let axisTimelist1 = [] // 折线图时间
let axisTimelist2 = [] // 折线图时间
const sellerMotorList = reactive({
  userNum: [],
  visitNum: []
}) // 流量趋势
// 获取首页的基本信息 今日待办 实时概况
const getPlatformStatistics = () => {
  http({
    url: http.adornUrl('/platform/statistics/getPlatformStatistics'),
    method: 'GET'
  }).then(({ data }) => {
    // 基本信息
    basicInfo.value = {
      orderNum: data.orderNum, // 订单数量
      orderNumRatio: data.orderNumRatio, // 提升比例
      prodNum: data.prodNum,
      prodNumRatio: data.prodNumRatio,
      refundNum: data.refundNum,
      refundNumRatio: data.refundNumRatio,
      shopNum: data.shopNum,
      shopNumRatio: data.shopNumRatio,
      userNum: data.userNum,
      userNumRatio: data.userNumRatio
    }
    pendingToday.value = {
      prodAuditNum: data.prodAuditNum, // 商品违规审核数量
      shopAuditNum: data.shopAuditNum, // 待审核商城数量
      distributionAuditNum: data.distributionAuditNum, // 待审核分销提现
      withdrawalAuditNum: data.withdrawalAuditNum // 待审核提现
    }
    nowDateForm.value = {
      currentOrderNum: data.currentOrderNum, // 今日订单数
      currentUserNum: data.currentUserNum, // 今日新增会员数
      currentShopNum: data.currentShopNum, // 今日新增商城数
      todayVisitors: data.todayVisitors, // 今日访客数
      firstSevenDayVisitors: data.firstSevenDayVisitors, // 前七天访客数
      currentPayAmount: data.currentPayAmount, // 今日交易额
      currentProdNum: data.currentProdNum, // 今日新增商品数
      currentProdCommNum: data.currentProdCommNum, // 今日新增评论数
      yesterdayVisitors: data.yesterdayVisitors, // 昨日访客数
      firstThirtyDayVisitors: data.firstThirtyDayVisitors // 前30天访客数
    }

    // 流量趋势
    // 交易趋势
    data.trendStatisticsList.forEach(element => {
      axisTimelist1.push(element.date)
      axisTimelist2.push(element.date)
      sellerMotorList.userNum.push(element.userNum)
      sellerMotorList.visitNum.push(element.visitNum)
      tradeTendencyList.value.push(element.amount)
    })
    getRefPerEchartData() // 流量趋势图
    getRefSumEchartData() // 交易趋势图
  })
}

// 交易趋势折线图
const getRefSumEchartData = () => {
  refChart = $echarts.init(document.getElementById('ref-chart'))
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: 20,
      right: 20,
      top: 55,
      width: '93%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {
          show: false
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: axisTimelist2, // x轴时间
      nameTextStyle: {
        color: 'red'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#E0E6F1'],
          width: 1,
          type: 'solid'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: $t('home.transactionAmount'),
        type: 'line',
        smooth: true,
        itemStyle: {
          normal: {
            color: '#29CB97',
            lineStyle: {
              color: '#29CB97'
            }
          }
        },
        data: tradeTendencyList.value // 具体数值
      }
    ]
  }
  option && refChart.setOption(option)
  window.addEventListener('resize', () => {
    refChart.resize()
  })
}

// 流量趋势折线图
const getRefPerEchartData = () => {
  refPerChart = $echarts.init(document.getElementById('refPer-chart'))
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: 20,
      right: 20,
      top: 55,
      width: '93%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {
          show: false
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: axisTimelist1,
      lineStyle: {
        color: 'red'
      },
      nameTextStyle: {
        color: 'red'
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          color: ['#E0E6F1'],
          width: 1,
          type: 'solid'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        name: $t('home.TraffictrendB'),
        type: 'line',
        smooth: true,
        itemStyle: {
          normal: {
            color: '#0058FF',
            lineStyle: {
              color: '#0058FF'
            }
          }
        },
        data: sellerMotorList.userNum
      },
      {
        name: $t('home.TraffictrendA'),
        type: 'line',
        smooth: true,
        itemStyle: {
          normal: {
            color: '#29CB97',
            lineStyle: {
              color: '#29CB97'
            }
          }
        },
        data: sellerMotorList.visitNum
      }
    ]
  }
  option && refPerChart.setOption(option)
  window.addEventListener('resize', () => {
    refPerChart.resize()
  })
}

let dateOfMonthAgo = ''
let today = ''
let nowDate = ''
let nowTime = ''
// 时间范围
const trendDataRange1 = ref([])
const trendDataRange2 = ref([])
const shopDateRange = ref([])
const prodDateRange = ref([])
const timeFormat = () => {
  const now = new Date()
  nowTime = formatDate(new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000), 'yyyy-MM-dd') + ' 00:00:00'
  nowDate = formatDate(new Date(now.getTime() - 24 * 60 * 60 * 1000), 'yyyy-MM-dd') + ' 23:59:59'
  dateOfMonthAgo = formatDate(new Date(now.getTime() - 29 * 24 * 60 * 60 * 1000), 'yyyy-MM-dd')
  today = formatDate(new Date(now.getTime() - 24 * 60 * 60 * 1000), 'yyyy-MM-dd')

  trendDataRange1.value[0] = dateOfMonthAgo
  trendDataRange1.value[1] = today
  trendDataRange2.value[0] = dateOfMonthAgo
  trendDataRange2.value[1] = today

  shopDateRange.value[0] = nowTime
  shopDateRange.value[1] = nowDate
  prodDateRange.value[0] = nowTime
  prodDateRange.value[1] = nowDate
}

const trendRangeChange = (type) => {
  http({
    url: http.adornUrl('/platform/statistics/trendData'),
    method: 'get',
    params: http.adornParams(
      Object.assign(
        {
          startTime: type === 1 ? trendDataRange1.value[0] : trendDataRange2.value[0],
          endTime: type === 1 ? trendDataRange1.value[1] : trendDataRange2.value[1]
        }
      )
    )
  }).then(({ data }) => {
    axisTimelist1 = []
    axisTimelist2 = []
    sellerMotorList.userNum = []
    sellerMotorList.visitNum = []
    tradeTendencyList.value = []

    data.forEach(element => {
      if (type === 1) {
        axisTimelist1.push(element.date)
        sellerMotorList.userNum.push(element.userNum)
        sellerMotorList.visitNum.push(element.visitNum)
      }
      if (type === 2) {
        axisTimelist2.push(element.date)
        tradeTendencyList.value.push(element.amount)
      }
    })
    if (type === 1) getRefPerEchartData() // 流量趋势图
    if (type === 2) getRefSumEchartData() // 交易趋势图
  })
}

const hotShopList = ref([]) // 热卖商城
const shopListTimeChange = () => {
  if (!shopDateRange.value || shopDateRange.value.length === 0) { /* empty */ } else {
    http({
      url: http.adornUrl('/platform/statistics/shop'),
      method: 'get',
      params: http.adornParams(
        Object.assign(
          {
            startTime: shopDateRange.value[0],
            endTime: shopDateRange.value[1]
          }
        )
      )
    }).then(({ data }) => {
      hotShopList.value = data
    })
  }
}

const hotProdList = ref([]) // 热卖商品
// 筛选某段时间内的商品销售数据
const prodListTimeChange = () => {
  http({
    url: http.adornUrl('/platform/statistics/prod'),
    method: 'get',
    params: http.adornParams(
      Object.assign(
        {
          startTime: prodDateRange.value[0],
          endTime: prodDateRange.value[1]
        }
      )
    )
  }).then(({ data }) => {
    hotProdList.value = data
  })
}

</script>

<style lang="scss" scoped>
@use "index";
</style>
